---
title: Card
description: "`Card` is a component that groups and displays related information. By default, it renders a `section` element."
storybook: components-card--basic
source: components/card
style: components/card/card.style.ts
---

## Usage

```tsx preview
<Card.Root>
  <Card.Header>
    <Heading size="xl">『SLAM DUNK』（スラムダンク）</Heading>
  </Card.Header>

  <Card.Body color="fg.muted">
    <Text>
      『SLAM
      DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
    </Text>
  </Card.Body>
</Card.Root>
```

:::code-group

```tsx [package]
import { Card } from "@yamada-ui/react"
```

```tsx [alias]
import { Card } from "@/components/ui"
```

```tsx [monorepo]
import { Card } from "@workspaces/ui"
```

:::

```tsx
<Card.Root>
  <Card.Header />
  <Card.Body />
  <Card.Footer />
</Card.Root>
```

### Change Variant

```tsx preview
<VStack>
  <For each={["elevated", "outline", "subtle", "solid"]}>
    {(variant, index) => (
      <Card.Root key={index} variant={variant}>
        <Card.Header>
          <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
        </Card.Header>

        <Card.Body>
          <Text>
            『SLAM
            DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
          </Text>
        </Card.Body>
      </Card.Root>
    )}
  </For>
</VStack>
```

### Change Size

```tsx preview
<VStack>
  <For each={["sm", "md", "lg", "xl"]}>
    {(size, index) => (
      <Card.Root key={index} size={size}>
        <Card.Header>
          <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
        </Card.Header>

        <Card.Body>
          <Text>
            『SLAM
            DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
          </Text>
        </Card.Body>
      </Card.Root>
    )}
  </For>
</VStack>
```

### Change Color Scheme

```tsx preview
<VStack>
  <For
    each={[
      { variant: "subtle", colorScheme: "green" },
      { variant: "solid", colorScheme: "pink" },
    ]}
  >
    {({ variant, colorScheme }, index) => (
      <Card.Root key={index} variant={variant} colorScheme={colorScheme}>
        <Card.Header>
          <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
        </Card.Header>

        <Card.Body>
          <Text>
            『SLAM
            DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
          </Text>
        </Card.Body>
      </Card.Root>
    )}
  </For>
</VStack>
```

### Customize Layout

```tsx preview
<Card.Root maxW="md">
  <Card.Header justifyContent="center">
    <Image
      src="https://slamdunk-movie.jp/files/images/p_gallery_03.jpg"
      w="full"
      rounded="l2"
    />
  </Card.Header>

  <Card.Body>
    <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>

    <Text>
      『SLAM
      DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
    </Text>
  </Card.Body>

  <Card.Footer>
    <Button>Wikipedia</Button>
  </Card.Footer>
</Card.Root>
```

```tsx preview
<Card.Root
  flexDirection={{ base: "row", md: "column" }}
  overflow="hidden"
  variant="outline"
>
  <Image
    src="https://slamdunk-movie.jp/files/images/p_gallery_03.jpg"
    objectFit="cover"
    maxW={{ base: "30%", md: "100%" }}
  />

  <VStack gap="0">
    <Card.Header>
      <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
    </Card.Header>

    <Card.Body>
      <Text>
        『SLAM
        DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
      </Text>
    </Card.Body>

    <Card.Footer>
      <Button>Wikipedia</Button>
    </Card.Footer>
  </VStack>
</Card.Root>
```

## Props

<PropsTable name="card" />
